<template>
  <div id="app">
    <div class="wrap3 wrap">
      <div class="center">
        <div id="main" style="width: 800px;height: 500px"></div>
        <div class="cursor" @mousedown="draw_cursor1" :style="cursorStyle1"></div>
        <div class="cursor" @mousedown="draw_cursor2" :style="cursorStyle2"></div>
      </div>
      <div class="right">
        <fieldset>
          <legend>操作</legend>
          <div class="field">
            <button @click="run" :disabled="start">启动</button>
            <button @click="stop" :disabled="!start">暂停</button>
          </div>
        </fieldset>
        <fieldset>
        <legend>电压</legend>
        <div class="field">
          <div style="font-size:30px;display: flex;justify-content: space-around;">{{V}}V</div>
        </div>
        </fieldset>
      </div>
    </div>
    <div class="bottom">
      <fieldset>
        <legend>实时</legend>
        <div class="field">
          <div style="font-size:30px;display: flex;justify-content: space-around;">{{I}}{{unit}}</div>
        </div>
      </fieldset>
      <fieldset>
        <legend>总体统计</legend>
        <div class="field">
          <div style="display: flex;justify-content: space-around;">平均：{{toal_averageI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最小：{{toal_minI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最大：{{toal_maxI}}{{unit}}</div>
        </div>
      </fieldset>
      <fieldset>
        <legend>窗口统计</legend>
        <div class="field">
          <div style="display: flex;justify-content: space-around;">平均：{{window_averageI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最小：{{window_minI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最大：{{window_maxI}}{{unit}}</div>
        </div>
      </fieldset>
      <fieldset>
        <legend>近期统计</legend>
        <div class="field">
          <div style="display: flex;justify-content: space-around;">平均：{{recent_averageI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最小：{{recent_minI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最大：{{recent_maxI}}{{unit}}</div>
        </div>
      </fieldset>
      <fieldset>
        <legend>游标统计</legend>
        <div class="field">
          <div style="display: flex;justify-content: space-around;">平均：{{cursor_averageI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最小：{{cursor_minI}}{{unit}}</div>
          <div style="display: flex;justify-content: space-around;">最大：{{cursor_maxI}}{{unit}}</div>
        </div>
      </fieldset>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      worldMapContainer: '',
      Chart:null,
      option:null,
      start:false,
      I:0,
      V:0,
      unit:"uA",
      toal_averageI:0,
      toal_minI:0,
      toal_maxI:0,
      window_averageI:0,
      window_minI:0,
      window_maxI:0,
      recent_averageI:0,
      recent_minI:0,
      recent_maxI:0,
      cursor_averageI:0,
      cursor_minI:0,
      cursor_maxI:0,
      number:0,
      cursorStyle1:"",
      cursorStyle2:"",
      dataIndex:1,
      axisValue:1,
      cursor1:{
        dataIndex:-1,
        axisValue:-1
      },
      cursor2:{
        dataIndex:-1,
        axisValue:-1
      }
    };
  },
  mounted(){
    var self = this;
    self.initChart()
  },
  methods: {
    initChart(){
      var self = this
      self.worldMapContainer = document.getElementById('main');
      self.resizeWorldMapContainer();

      self.Chart = self.$echarts.init(this.worldMapContainer);

      self.option = {
        title: {text: '微功耗曲线'},
        tooltip: {
          trigger: 'axis',
          formatter: function (params,ticket,callback) {
            self.dataIndex = params[0].dataIndex;
            self.axisValue = params[0].axisValue;
            let res = '当前时间：'+ params[0].name;
            for (let i = 0, l = params.length; i < l; i++) {
              res += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value;
            }
            return res
          }
        },
        legend: {data:['电流']},
        xAxis: {type: 'category',name:'(ms)',boundaryGap: false,data: []},
        yAxis: {type: 'value',name:'(uA)',},
        series: [{name: '电流',type: 'line',smooth:true,data: []}],
        toolbox: { show: true,feature: {saveAsImage: {}}},
        dataZoom: [{type: 'slider',realtime: true,start: 0,end: 100},
          {type: 'inside',realtime: true,start: 0,end: 100}],
      };
      
      window.onresize = function () {
        self.resizeWorldMapContainer();
        self.Chart.resize();
      };
      //1ms一个点 1000个点 就是只能显示1s的数据
      for(var i=0; i<1000; i++){
        self.option.xAxis.data.push('')
      }

      self.Chart.setOption(self.option);
    },
    run(){
      var self = this
      var values,option,length,min,max,sum
      self.start = true
      self.timer =  setInterval(function(){
        self.$http.post("cgi-bin/getValues",{}).then(function (response) {

          values = response.data.data.values
          option = {series:[]}
          length = values.length

          for(var i=0; i<length-7; i++){
            if(self.option.series[0].data.length == 1000){
              self.option.series[0].data.shift()
            }
            self.option.series[0].data.push(values[i])
          }

          option["series"][0]={data:self.option.series[0].data}
          self.I = values[length-8]
          self.V = values[length-7]
          self.toal_averageI = values[length-6]
          self.toal_minI = values[length-5]
          self.toal_maxI = values[length-4]
          self.recent_averageI = values[length-3]
          self.recent_minI = values[length-2]
          self.recent_maxI = values[length-1]
          min=99999999999999999
          max=-9999999999999999
          sum=0
          for(var i=0; i<self.option.series[0].data.length; i++){
            if(self.option.series[0].data[i] > max)max = self.option.series[0].data[i]
            if(self.option.series[0].data[i] < min)min = self.option.series[0].data[i]
            sum = sum + self.option.series[0].data[i]
          }

          self.window_averageI = (sum / self.option.series[0].data.length).toFixed(2)
          self.window_minI = min
          self.window_maxI = max

          if(self.Chart.setOption){
            self.Chart.setOption(option)
          }
        })

      },1000);
    },
    stop(){
      var self = this
      self.start = false
      clearInterval(self.timer);
    },
    resizeWorldMapContainer:function () {
      this.worldMapContainer.style.width = window.innerWidth*0.8+'px';
      this.worldMapContainer.style.height = window.innerHeight*0.6+'px';
      this.cursorStyle1 = "height:"+window.innerHeight*0.55+'px;'+'left:40%;'+'top:40px;';
      this.cursorStyle2 = "height:"+window.innerHeight*0.55+'px;'+'left:50%;'+'top:40px;';
    },
    draw_cursor1:function(e){
      var self = this;
      var min,max,sum
      document.onmousemove = (e)=>{       //鼠标按下并移动的事件
        self.cursorStyle1 = "height:"+window.innerHeight*0.55+'px;'+'left:'+e.pageX+'px;'+'top:40px;';
      };

      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        if(self.option.series[0].data.length < 2)return
        self.cursor1.axisValue = self.axisValue
        self.cursor1.dataIndex = self.dataIndex
        if( self.cursor2.axisValue == -1 && self.cursor2.dataIndex == -1)return

        var start = self.cursor1.dataIndex<self.cursor2.dataIndex?self.cursor1.dataIndex:self.cursor2.dataIndex
        var stop = self.cursor1.dataIndex<self.cursor2.dataIndex?self.cursor2.dataIndex:self.cursor1.dataIndex
        
        min=99999999999999999
        max=-9999999999999999
        sum=0
        for(var i=start; i<=stop; i++){
          if(min > self.option.series[0].data[i])min = self.option.series[0].data[i]
          if(max < self.option.series[0].data[i])max = self.option.series[0].data[i]
          sum = sum+self.option.series[0].data[i]
        }
        
        self.cursor_averageI = (sum / (stop-start+1)).toFixed(2)
        self.cursor_minI = min
        self.cursor_maxI = max
        console.log(self.cursor1)
      };
    },
    draw_cursor2:function(e){
      var self = this;
      var min,max,sum
      document.onmousemove = (e)=>{       //鼠标按下并移动的事件
        self.cursorStyle2 = "height:"+window.innerHeight*0.55+'px;'+'left:'+e.pageX+'px;'+'top:40px;';
      };

      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        if(self.option.series[0].data.length < 2)return
        self.cursor2.axisValue = self.axisValue
        self.cursor2.dataIndex = self.dataIndex
        if( self.cursor1.axisValue == -1 && self.cursor1.dataIndex == -1)return
        var start = self.cursor1.dataIndex<self.cursor2.dataIndex?self.cursor1.dataIndex:self.cursor2.dataIndex
        var stop = self.cursor1.dataIndex<self.cursor2.dataIndex?self.cursor2.dataIndex:self.cursor1.dataIndex
        
        min=99999999999999999
        max=-9999999999999999
        sum=0
        for(var i=start; i<=stop; i++){
          if(min > self.option.series[0].data[i])min = self.option.series[0].data[i]
          if(max < self.option.series[0].data[i])max = self.option.series[0].data[i]
          sum = sum+self.option.series[0].data[i]
        }
        
        self.cursor_averageI = (sum / (stop-start+1)).toFixed(2)
        self.cursor_minI = min
        self.cursor_maxI = max

        console.log(self.cursor2)
      };
    }
  }
}
</script>

<style scoped>
#app{
  margin-top: 20px;
  border:4px solid #DADAD8;
}
.wrap3{
  display: flex;
  min-height: 200px;
}
.wrap3 .right{
  border-left:4px solid #DADAD8;
  flex-basis: 20%;
  display: flex;
  flex-direction :column;
  justify-content: space-around;
}
.wrap3 .center{
  flex: 1;
}
.bottom{
  border-top:4px solid #DADAD8;
  width:100%;
  height:30vh;
  display: flex;
  justify-content: space-around;
}

.right fieldset{
  margin: auto;
  width: 80%;
  height: 40%;
}
.bottom fieldset{
  margin-top: 30px;
  width: 15%;
  height: 70%
}
.cursor{
  position: fixed;
  width: 2px;
  cursor: e-resize;
  border-left:1px dashed #000;
}
.field{
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction :column;
  justify-content: space-around;
}

button{
  margin: auto;
  width: 60%;
  height: 30%;
}
</style>
